{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">
{% endblock %}

{% block content_title %}Configuration{% endblock %}
{% block content %}
<div class="with-padding">
{% set count = 0 %}
{% for categorie, items in config %}
    {% set count = count + 1 %}
    {% if count == 1 %}
        <div class="columns">            
    {% endif %}
            <div class="six-columns twelve-columns-tablet">
                <h3 class="thin underline">{{ categorie|capitalize }}</h3>	
	{% for key, item in items %}    
        <p class="inline-large-label button-height">
        
            <label for="{{ item.name }}" class="label">{{ item.friendly_name }} <small>({{ item.type }})</small></label>
            {% if item.type == 'string' %}
            <input type="text" name="{{ item.name }}" id="{{ item.name }}" class="input" value="{{ item.value }}">            
            {% elseif item.type == 'bool' %}
            <input type="checkbox" name="{{ item.name }}" id="{{ item.name }}" class="switch medium" {% if item.value == 1 %}checked="checked"{% endif %}>
            {% elseif item.type == 'int' %}
            <span class="number input margin-right">
                <button type="button" class="button number-down">-</button>
                <input type="text" name="{{ item.name }}" id="{{ item.name }}" value="{{ item.value }}" class="input-unstyled" >
                <button type="button" class="button number-up">+</button>
            </span>
            {% elseif item.type == 'text' %}        
            <textarea  name="{{ item.name }}" id="{{ item.name }}" class="input full-width">Default textarea</textarea> 
            {% endif %}
            <span class="info-spot">
                    <span class="icon-info-round"></span>
                    <span class="info-bubble">
                        {{ item.description }}
                    </span>
            </span>
        </p>
    {% endfor %}
            </div>
    {% if count == 2 %}
    	{% set count = 0 %}        	
        </div>
    {% endif %}    
{% endfor %}
</div>
{% endblock %}

{% block javascripts %}


	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>

	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();

		// Tooltip menu
		$(document).ready(function()
		{
			$('#select-tooltip').menuTooltip($('#select-context').hide(), {
				classes: ['no-padding']
			});
		});

	</script>
{% endblock %}

</body>
</html>